<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级动画</title>
</head>
<body>
    <div>
        <canvas id="canvas" width="600" height="300"></canvas>
    </div>
    <script>
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        var raf;
        var ball = {
            x: 100,
            y: 100,
            vx: 5,
            vy: 2,
            radius: 25,
            color: '#03a9f4',
            draw: function(){
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }
        function draw(){
            ctx.clearRect(0,0, canvas.width, canvas.height);

            ball.draw();

            ball.x += ball.vx;

            ball.y += ball.vy;

            raf = window.requestAnimationFrame(draw);

            if(ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0){
                ball.vy = -ball.vy;
            }

            if(ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0){
                ball.vx = -ball.vx;
            }
        }

        canvas.addEventListener('mouseover', function(){

            raf = window.requestAnimationFrame(draw)
        })

        canvas.addEventListener('mouseout', function(){
            window.cancelAnimationFrame(raf);
        })

        ball.draw();
    </script>
</body>
</html>